
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的订单</title>
		<style type="text/css">
		@font-face {
			font-family: 'iconfont';
			src: url('../../static/css/font/iconfont.eot');
			src: url('../../static/css/font/iconfont.eot?#iefix') format('embedded-opentype'),
			url('../../static/css/font/iconfont.woff2') format('woff2'),
			url('../../static/css/font/iconfont.woff') format('woff'),
			url('../../static/css/font/iconfont.ttf') format('truetype'),
			url('../../static/css/font/iconfont.svg#iconfont') format('svg');
		}
		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		</style>
		<link rel="stylesheet" href="../../static/css/myOrder.css" />
		<script type="text/javascript" src="../../static/js/jquery-3.1.0.js"></script>
		<script type="text/javascript" src="../../static/js/myOrder.js"></script>
	</head>

	<body>
		<!--顶部样式-->
		<header class="layout-header clearfix">
			<div class="mzcontainer">
				<!--魅族商标-->
				<div class="layout-header-logo">
					<a>
						<img src="../../static/img/1.png" style="max-width:125px;margin-top:28px;">
					</a>
				</div>
				<!--搜索框-->
				<ul class="layout-header-service">
					<li class="layout-search">
						<input class="meizu-header-input" type="text" name="魅族 Note9" id="魅族 Note9" placeholder="魅族 Note9" />
						<a><img src="../../static/img/2.png" class="layout-img-search" /></a>
					</li>
					<!--登录头像-->
					<li class="layout-header-service-item">
						<a class="layout-header-service-link">
							<img src="../../static/img/3.jpg" style="height: 30px;width: 30px;border-radius: 100%;">
						</a>
					</li>
					<!--购物车图标-->
					<li class="layout-header-service-cat">
						<a class="layout-header-service-cat">
							<img src="../../static/img/4.png" style="height: 30px;width: 30px;">
							<span class="layout-header-service-cat-num">0</span>
						</a>
					</li>
				</ul>
				<!--顶部条件搜索-->
				<ul class="layout-header-nav">
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">手机</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">声学</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">配件</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">生活</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">Flyme</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">服务</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">专卖店</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">社区</a>
					</li>
					<li class="layout-header-nav-item">
						<a class="layout-header-nav-link">APP下载</a>
					</li>
				</ul>
				<!--手机Hover列表-->
				<div>
					<a></a>
				</div>
				<!--顶部下划线-->
				<hr class="layout-header-downmenu"></hr>
			</div>
		</header>
		<!--中部订单页面显示-->
		<div class="store-wrap">
			<!--首页订单跳转-->
			<div class="crumbs">
				<a>首页&nbsp;></a>
				<a>我的商城&nbsp;></a>
				<a id="my-order">我的订单</a>
			</div>
			<!--订单页面 -->
			<div class="main-clearfix">
				<div class="left-nav">
					<!--左边订单选项-->
					<div class="nav-main" id="nav-main-mk">
						<a class="type-title">订单中心</a>
						<a class="ml" id="m1">我的订单</a>
						<a class="ml" id="m2">我的回购单</a>
						<a class="type-title">个人中心</a>
						<a class="ml" id="m3">地址管理</a>
						<a class="ml" id="m4">我的收藏</a>
						<a class="ml" id="m5">消息管理</a>
						<a class="ml" id="m6">建议反馈</a>
						<a class="type-title">资产中心</a>
						<a class="ml" id="m7">我的优惠券</a>
						<a class="ml" id="m8">我的红包</a>
						<a class="ml" id="m9">我的回购金</a>
						<a class="type-title">服务中心</a>
						<a class="ml" id="m10">退款退换货跟踪</a>
						<a class="ml" id="m11">以旧换新</a>
					</div>
				</div>
				<!--右边格式-->
				<div class="right-content">
					<!--订单详情样式-->
					<div class="order-main">
						<div class="type-tab-btn">
							<a class="allOrder-active">
								全部订单
							</a>
							<span class="line">|</span>
							<a class="waitPay">
								待付款
							</a>
							<span class="line">|</span>
							<a class="waitDeliver">
								待发货
							</a>
							<span class="line">|</span>
							<a class="hasDeliver">
								已发货
							</a>
							<span class="line">|</span>
							<a class="other">
								其他
							</a>
						</div>
						<!--订单明细样式-->
						<div class="list-head">
							<ul class="clearfix">
								<li class="w50">
									<select class="check-type">
										<option>近三个月的订单</option>
										<option>全部订单</option>
									</select>
									订单明细
								</li>
								<li class="w125">售后</li>
								<li class="w125">金额</li>
								<li class="w125">状态</li>
								<li class="w125">操作</li>
							</ul>
						</div>
						<!--订单详情页面-->
						<div class="ui-load-container">
							<div class="J_no_data_des-1">
								<p class="J_no_data_des">(全部订单)您暂无此类订单，赶快去下单吧！</p>
							</div>
							<div class="J_no_data_des-2">
								<p class="J_no_data_des">(待付款)您暂无此类订单，赶快去下单吧！</p>
							</div>
							<div class="J_no_data_des-3">
								<p class="J_no_data_des">(待发货)您暂无此类订单，赶快去下单吧！</p>
							</div>
							<div class="J_no_data_des-4">
								<p class="J_no_data_des">(已发货)您暂无此类订单，赶快去下单吧！</p>
							</div>
							<div class="J_no_data_des-5">
								<p class="J_no_data_des">(其他)您暂无此类订单，赶快去下单吧！</p>
							</div>
						</div>
						<input type="hidden" id="pageId" value="0" />
					</div>
					<!--回购单样式-->
					<div class="right-content-fr">
						<div class="backOrder-main">
							<a class="gotoBack">我要回购</a>
							<div class="type-tab-btn">
								<a class="active-allOrder">回购单列表</a>
								<span class="amount-actAmount"></span>
							</div>
							<div class="list-head-fr">
								<ul class="clearfix-fr">
									<li>产品型号</li>
									<li>回购价格</li>
									<li>评估描述情况</li>
									<li>当前回购状态</li>
									<li>操作</li>
								</ul>
							</div>
							<div class="type-contain">
								<p class="J_no_data_des">
									<a>您暂无回购单，赶快去以旧换新吧！</a>
								</p>
							</div>
						</div>
					</div>
					<!--地址管理样式-->
					<div class="right-content-f-fr">
						<div class="address-main">
							<div class="main">
								<!--新增地址头部-->
								<div class="row">
									<span class="title rollit">新增收货地址</span>
									<span class="gray">
								（您目前已有地址
									<i class="gray">0</i>
									个，最多还可以增加
									<i class="settle">10</i>
									个）
									</span>
								</div>
								<!--填写地址信息-->
								<script>
									$(function () {
										$(".saveAddress").click(function () {
											let people = $("#name").val();
											let phone = $("#phone").val();
											let province = $("#province").val();
											let city = $("#city").val();
											let county = $("#county").val();
											let village = $("#village").val();
											let addr = $("#detailAddress").val();
											let isdefault = document.getElementById("default").checked ? 1 : 0;
											let flag = 1;
											let da = {
												people: people,
												phone: phone,
												province: province,
												city: city,
												county: county,
												village: village,
												addr: addr,
												isdefault: isdefault,
												flag: flag
											};
											console.log(da);
											$.ajax({
												url: "/addr",
												type: "POST",
												dataType: "json",
												data: {
													addr: JSON.stringify(da)
												},
												success: function (data) {
													alert(data);
												}
											});
										});
									});
								</script>
								<form id="valid-form">
									<div class="content">
										<div class="row namePhone clearfix">
											<div class="f-fl addressName">
												<span>
											收货人姓名
											<i class="mark">*</i>
										</span>
												<input id="name" class="varify" name="receiver" type="text" placeholder="长度不超过15个字"
													   maxlength="15"/>
												<!--<span class="error">必填</span>-->
											</div>
											<div class="f-fl addressPhone">
												<span>
											收货人手机号
											<i class="mark">*</i>
										</span>
												<input id="phone" name="telNumber" class="varify" type="text"
													   placeholder="请输入11位手机号" maxlength="11"/>
												<!--<span class="error">必填</span>-->
											</div>
										</div>
										<div class="row clearfix receverAddress">
											<span class="f-fl">
										收货人地址
										<i class="mark">*</i>
									</span>
											<!--省-->
											<div class="mzui_select mzui_select_province f-fl">
												<input id="province" readonly="readonly" type="text"
													   class="mzui_select_trigger province" placeholder="省/直辖市"/>
												<ul class="pro province"></ul>
												<script>
													$(function () {
														let pro = $(".province");
														let city = $(".city");
														let county = $(".county");
														let mydata;

														$.getJSON("CN.json", function (data) {
															mydata = data;
															for (let i = 0; i < data.length; i++) {
																let e = document.createElement("li");
																$(e).html(data[i].value);
																$(e).appendTo(pro);
															}
														});
														let mycounty;
														pro.on("click", "li", function () {
															city.children().remove();
															$("#city").val("");
															county.children().remove();
															$("#county").val("");
															$("#province").val($(this).html());
															pro.removeClass("dis-blo");
															let index = $(this).index();
															mycounty = mydata[index].child;
															for (let i = 0; i < mycounty.length; i++) {
																let e = document.createElement("li");
																$(e).html(mycounty[i].value);
																$(e).appendTo(city);
															}

														});
														$("#province").click(function () {
															pro.hasClass("dis-blo") ? pro.removeClass("dis-blo") : pro.addClass("dis-blo");
														});


														city.on("click", "li", function () {
															county.children().remove();
															$("#county").val("");
															$("#city").val($(this).html());
															city.removeClass("dis-blo");
															let index = $(this).index();
															let child = mycounty[index].child;
															for (let i = 0; i < child.length; i++) {
																let e = document.createElement("li");
																$(e).html(child[i].value);
																$(e).appendTo(county);
															}
														});
														$("#city").click(function () {
															city.hasClass("dis-blo") ? city.removeClass("dis-blo") : city.addClass("dis-blo");
														});

														$("#county").click(function () {
															county.hasClass("dis-blo") ? county.removeClass("dis-blo") : county.addClass("dis-blo");
														});

                                                        county.on("click", "li", function () {
                                                            $("#county").val($(this).html());
                                                            county.removeClass("dis-blo");
                                                        });
                                                        $(".pro").blur(function () {
                                                            $(".pro").removeClass("dis-blo");
                                                        });
                                                    });
                                                </script>
                                            </div>
                                            <!--城市-->
                                            <div class="mzui_select mzui_select_city f-fl">
                                                <input id="city" type="text" class="mzui_select_trigger city" placeholder="城市"/>
                                                <ul class="pro city"></ul>
                                            </div>
                                            <!--区、镇、县 -->
                                            <div class="mzui_select mzui_select_city f-fl">
                                                <input id="county" type="text" class="mzui_select_trigger area" placeholder="区/县"/>
                                                <ul class="pro county"></ul>
                                            </div>
                                            <!--乡镇、街道-->
                                            <div class="mzui_select mzui_select_town f-fl">
                                                <input id="village" type="text" class="mzui_select_trigger town"
                                                       placeholder="乡镇/街道"/>

                                            </div>
                                        </div>
										<!--详细地址 -->
										<div class="row  detailAddress">
											<span>
												详细地址
												<i class="mark">*</i>
											</span>
											<input id="detailAddress" name="address" class="varify errorRed" type="text"
												   placeholder="请输入不少于4不超过50个字的详细地址，例如：路名，门牌号" minlength="4" maxlength="50"/>
											<!--<span class="error">请详细填写地址信息</span>-->
										</div>
										<div class="opreat">
											<label for="default">
												<input id="default" class="setDefault" type="checkbox" name="isDefault"/>
												设为默认
											</label>
											<a class="saveAddress">保存</a>
										</div>
									</div>
								</form>
								<!--已有地址模块-->
								<div class="list">
									<div class="row">
										<div class="title">
											<div>已有地址</div>
										</div>
									</div>
									<div class="listHead">
										<span class="center w15">收货人姓名</span>
										<span class="center w35">收货人地址</span>
										<span class="center w25">收货人手机号</span>
										<span class="center w10">操作</span>
									</div>
									<ul id="tableList">
										<li>
											<input class="addressId" type="hidden"  />
											<input class="isOld" type="hidden" value="" />
											<span class="center w15"></span>
											<span class="completeAddress center w35"></span>
											<span class="center w25"></span>
											<span class="center w10">
												<a class="edit">修改</a>
												<a class="delete">删除</a>
											</span>
											<span class="left w15">
												<i class="iconfont icon-default">&#xe60e;</i>
												<i class="beDefault hide">设为默认</i>
											</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!--退款详情样式-->
					<div class="service-order-main">
						<div class="type-tab-btn">
							<div class="type-tab-btn">
								<a class="active-allOrder">售后退换货</a>
								<span class="amount-actAmount"></span>
							</div>
							<div class="list-head-btn">
								<ul class="clearfix-btn">
									<li class="w50">订单商品</li>
									<li class="w125">&nbsp;</li>
									<li class="w125">退款金额</li>
									<li class="w125">
										<form id="status-query-form">
											<select id="status-qurey">
												<option value="-1" selected="true">全部状态</option>
												<option value="0">待售后处理</option>
												<option value="6">商品待寄回</option>
												<option value="8">换货商品待收货</option>
												<option value="1">待售后验收</option>
												<option value="3">售后完成</option>
												<option value="4">售后关闭</option>
											</select>
										</form>
									</li>
									<li class="w125">操作</li>
								</ul>
							</div>
							<div class="type-contain ui-load-container">
								<p class="J_no_data_des">
									您暂无此类订单，赶快去下单吧！
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--底部 -->
			<div class="meizu-footer">
				<div class="meizu-footer-link">
					<!--底部服务项目-->
					<div class="meizu-row">
						<ul class="meizu-footer-service">
							<li>
								<a>
									<img src="../../static/img/meizu49.png" />
									<span>满80免运费</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu50.png" />
									<span>100+ 城市次日送达</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu51.png" />
									<span>7天无理由退货</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu52.png" />
									<span>15天换货保障</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu53.png" />
									<span>1年免费保修</span>
								</a>
							</li>
							<li>
								<a>
									<img src="../../static/img/meizu54.png" />
									<span>上门快修</span>
								</a>
							</li>
						</ul>
						<div class="onlive-server">
							<span>周一至周日 7:30-24:00</span>
							<p class="tel">400-788-3333</p>
							<a class="onlive-btn">在线客服</a>
						</div>
					</div>
					<!--服务项目划线-->
					<hr class="foot-hr" />
					<!--底部了解详情-->
					<div class="meizu-footer-co">
						<div class="meizu-row-row">
							<div class="meizu-footer-info">
								<div class="meizu-footer-info-left">
									<ul class="clearfix">
										<li>
											<a><span>了解魅族</span></a>
										</li>
										<li>
											<a><span>加入我们</span></a>
										</li>
										<li>
											<a><span>联系我们</span></a>
										</li>
										<li>
											<a><span>Flyme</span></a>
										</li>
										<li>
											<a><span>魅族社区</span></a>
										</li>
										<li>
											<a><span>天猫旗舰店</span></a>
										</li>
										<li>
											<a><span>问题反馈</span></a>
										</li>
										<li>
											<a><span>线上销售授权名单公示</span></a>
										</li>
										<li>
											<a><span>出版物经营许可证证</span></a>
										</li>
										<li>
											<a><span>简体中文</span></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="meizu-footer-certificate">
						©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.
						<a>粤ICP备13003602号</a>
						<a>合字B2-20170010</a>
						<a>营业执照</a>
						<a>法律声明</a>
						<span>粤公网安备 44049102496009号</span>
						<a></a>
						<a></a>
						<a></a>
					</div>
					<div class="ii-subscribe">
						<a><img src="../../static/img/meizu115.png" /></a>
						<span class="li-hr"></span>
						<a><img src="../../static/img/meizu116.png"></a>
						<span class="li-hr"></span>
						<a><img src="../../static/img/meizu117.png"></a>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>